<template>
	<view class="login column">
		<view class="column flex-1 justify-between mlr60">
			<view class="centerV">
				<view class="align-center zoom3" style="margin: 150rpx 0 0">
					<u-image
						:showMenuByLongpress="false"
						showLoading
						lazyLoad
						width="196rpx"
						height="196rpx"
						:src="config.get('logo')"
						radius="20rpx"
					/>
				</view>
				<view class="w-calc-22 title zoom-in4 mt60">
					<text>欢迎来到询车</text>
					<!-- #ifdef APP || H5 -->
					<text>APP</text>
					<!-- #endif -->
					<!-- #ifdef MP -->
					<text>小程序</text>
					<!-- #endif -->
				</view>
				<view class="form">
					<u-form errorType="toast" :model="loginForm" :rules="formRules" ref="formRef">
						<view class="esay-out5">
							<u-form-item prop="data.phone">
								<u-input type="number" v-model="loginForm.data.phone" placeholder="请输入手机号码" border="none" />
							</u-form-item>
						</view>
						<view class="esay-out6 mt41">
							<u-form-item prop="data.code">
								<u-input type="number" v-model="loginForm.data.code" placeholder="请输入验证码" border="none">
									<template #suffix>
										<u-text :text="tips" type="primary" @click="getCode" />
										<up-code :seconds="60" ref="uCodeRef" @change="(e) => (tips = e)"></up-code>
									</template>
								</u-input>
							</u-form-item>
						</view>
						<view class="esay-out7">
							<u-button
								@click="tapLogin"
								:custom-style="{ ...buttonStyle, marginTop: '130rpx' }"
								type="primary"
								text="登录"
							/>
						</view>
					</u-form>
					<!-- #ifdef APP || H5 -->
					<!-- #endif -->

					<!-- #ifdef MP -->
					<!-- <u-button
						@click="tapLogin"
						:custom-style="{ ...buttonStyle, marginTop: '100rpx' }"
						type="primary"
						openType="getPhoneNumber"
						@getphonenumber="onLoginWechat"
						text="手机号快捷登录"
					/> -->
					<!-- #endif -->

					<u-button
						:custom-style="{ ...buttonStyle, marginTop: '20rpx', color: '#000000' }"
						color="#F3F3F3"
						text="暂不登录"
						@click="navBack"
					/>
				</view>
			</view>
			<view class="column">
				<!-- #ifdef APP || H5 -->
				<view class="centerV mb56">
					<button class="wechat-login" @click="onLoginWechat">
						<u-image
							src="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/login/wechat-login.png"
							width="80rpx"
							height="80rpx"
						/>
						<text class="mt10 color3 fs24 mt10">微信登录</text>
					</button>
				</view>
				<!-- #endif -->
				<view class="fs24 align-center zoom8">
					<u-checkbox-group v-model="check" shape="circle">
						<u-checkbox activeColor="#3f79eb" labelColor="#B5B5B5" label-size="24rpx" :name="true" />
					</u-checkbox-group>
					<text class="base-color" @click="check[0] = !check[0]">
						<text class="color9">我已阅读并同意</text>
						<text @click.passive.stop="navTo('pages/article/details', { code: 'agreement' })">《用户协议》</text>
						<text>|</text>
						<text @click.passive.stop="navTo('pages/article/details', { code: 'policy' })">《隐私政策》</text>
					</text>
				</view>
			</view>
		</view>
		<view class="">
			<u-popup
				:show="showPopup"
				closeable
				@close="showPopup = false"
				mode="center"
				round="30rpx"
				:safeAreaInsetBottom="false"
			>
				<view class="ptb30 plr50" style="width: 550rpx">
					<text class="center fs30 bold">温馨提示</text>
					<view class="fs26 mt50 base-color" style="line-height: 40rpx">
						<text class="color9">允许我们在必要场景下，合理使用您的个人信息，且阅读并同意</text>
						<text @click.passive.stop="navTo('pages/article/details', { code: 'agreement' })">《用户协议》</text>
						<text>|</text>
						<text @click.passive.stop="navTo('pages/article/details', { code: 'policy' })">《隐私政策》</text>
					</view>
					<view class="justify-between mt50">
						<u-button
							:custom-style="{ ...buttonStyle, color: '#b5b5b5', marginRight: '10rpx', border: '2px solid #b5b5b5' }"
							@click="showPopup = false"
						>
							不同意
						</u-button>
						<u-button :custom-style="{ ...buttonStyle, marginLeft: '10rpx' }" type="primary" @click="agreePolicy">
							同意
						</u-button>
					</view>
				</view>
			</u-popup>
		</view>

		<!-- 邀请码弹窗 -->
		<view class="">
			<u-popup :show="inviteOpen" mode="center" round="20rpx" @close="skipInvite">
				<view class="code-input">
					<view class="title">输入邀请码</view>
					<input
						v-model="inviteCode"
						placeholder="邀请码"
						class="input-ctn"
						placeholder-class="input-hold"
						type="text"
					/>
					<view class="but-box">
						<view class="base cancel" @click="skipInvite">暂时跳过</view>
						<view class="base confirm" @click="setInviteCode">确认</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script setup>
import { navTo, navBack } from '@/core/app';
import config from '@/core/config/index.js';
import { useIndex } from './hooks/index.js';
const {
	buttonStyle,
	check,
	agreePolicy,
	showPopup,
	formRef,
	loginForm,
	formRules,
	tips,
	uCodeRef,
	getCode,
	tapLogin,
	onLoginWechat,
	inviteOpen,
	inviteCode,
	setInviteCode,
	skipInvite
} = useIndex();
</script>

<style lang="scss" scoped>
page {
	background: #fff;
}

.login {
	height: calc(100% - 90rpx - 30rpx);
	width: calc(100% - 60rpx);
	padding: 90rpx 30rpx 30rpx;
	background: url('https://monvkeji.oss-cn-chengdu.aliyuncs.com/yinfa/images/bg/login.png') no-repeat;
	background-size: 100%;

	.form {
		width: 100%;
		margin-top: 50rpx;

		:deep(.u-form-item__body) {
			padding: 28rpx 30rpx;
			border-radius: 20rpx;
			background: #f3f3f3;
		}
	}
}

.wechat-login {
	border: none;
	background-color: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	&::after {
		display: none;
	}
}

.code-input {
	width: 572rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 59rpx 67rpx 71rpx 68rpx;
	box-sizing: border-box;

	.title {
		width: 100%;
		font-weight: 600;
		font-size: 32rpx;
		color: #121212;
		text-align: center;
	}

	.input-ctn {
		width: 100%;
		height: 78rpx;
		background-color: #e8f3ff;
		margin-top: 46rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #000000;
		padding: 0 35rpx 0 35rpx;
		box-sizing: border-box;
		border-radius: 15rpx;
	}

	.input-hold {
		font-weight: 400;
		font-size: 24rpx;
		color: #959595;
	}

	.but-box {
		margin-top: 58rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.base {
			width: 200rpx;
			height: 78rpx;
			border-radius: 15rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.cancel {
			background: #f3f3f3;
			font-weight: bold;
			font-size: 30rpx;
			color: #121212;
		}

		.confirm {
			background: #0759bb;
			font-weight: bold;
			font-size: 30rpx;
			color: #ffffff;
			margin-left: 37rpx;
		}
	}
}

.title {
	font-weight: 600;
	font-size: 38rpx;
	color: #121212;
}
</style>
